import { View, Swiper, SwiperItem, Image, Text } from "@tarojs/components";
import { AtIcon, AtTag } from "taro-ui";
import "./index.scss";
import p1 from "./mockImages/p1.png";
import p2 from "./mockImages/p2.png";
import p3 from "./mockImages/p3.png";

const GoodsDetails = () => {
  // 模拟数据，实际开发时应该从API获取
  const goodsImages = [p1, p2, p3];

  const specifications = ["500g", "1kg", "2kg"];

  return (
    <View className="goods-details">
      {/* 顶部轮播图 */}
      <Swiper className="goods-swiper" indicatorDots circular autoplay>
        {goodsImages.map((img, index) => (
          <SwiperItem key={index}>
            <Image src={img} mode="aspectFill" className="swiper-image" />
          </SwiperItem>
        ))}
      </Swiper>

      {/* 规格选择 */}
      <View className="specs-section">
        <View className="section-title">规格</View>
        <View className="specs-tags">
          {specifications.map((spec, index) => (
            <AtTag key={index} className="spec-tag">
              {spec}
            </AtTag>
          ))}
        </View>
      </View>

      {/* 商品名称和介绍 */}
      <View className="basic-info">
        <View className="goods-name">优质花生</View>
        <View className="goods-price">¥29.9</View>
        <View className="goods-desc">精选优质花生，口感香脆，营养丰富</View>
      </View>

      {/* 注意事项 */}
      <View className="notice-section">
        <View className="section-title">注意事项</View>
        <View className="notice-content">
          储存于阴凉干燥处，开封后请尽快食用
        </View>
      </View>

      {/* 商品属性 */}
      <View className="attributes-section">
        <View className="section-title">商品属性</View>
        <View className="attribute-item">
          <Text className="label">种类</Text>
          <Text className="value">花生</Text>
        </View>
        <View className="attribute-item">
          <Text className="label">保质期</Text>
          <Text className="value">12个月</Text>
        </View>
        <View className="attribute-item">
          <Text className="label">包装</Text>
          <Text className="value">袋装</Text>
        </View>
        <View className="attribute-item">
          <Text className="label">保存状态</Text>
          <Text className="value">常温</Text>
        </View>
      </View>

      {/* 详情图片 */}
      <View className="detail-images">
        <View className="section-title">商品详情</View>
        {goodsImages.map((img, index) => (
          <Image
            key={index}
            src={img}
            mode="widthFix"
            className="detail-image"
          />
        ))}
      </View>

      {/* 价格说明 */}
      <View className="price-description">
        <View className="section-title">价格说明</View>
        <View className="price-item">
          <Text className="label">划线价格：</Text>
          <Text className="content">指商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等</Text>
        </View>
        <View className="price-item">
          <Text className="label">未划线价格：</Text>
          <Text className="content">指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或使用优惠券、积分等发生变化</Text>
        </View>
      </View>

      {/* 底部操作栏 */}
      <View className="bottom-action-bar">
        <View className="left-actions">
          <View className="action-item">
            <AtIcon value="star" size="24" color="#666"></AtIcon>
            <Text className="action-text">收藏</Text>
          </View>
          <View className="action-item">
            <AtIcon value="shopping-cart" size="24" color="#666"></AtIcon>
            <Text className="action-text">购物车</Text>
          </View>
        </View>
        <View className="add-to-cart-btn">加入购物车</View>
      </View>
    </View>
  );
};

export default GoodsDetails;
